<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header a{
      text-decoration: none;/*无下划线*/
      font-size: 24px;
      color: #333334;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }

    .box-card {
      width: 480px;
    }
    .input_login{
      margin-top: 5px;
      margin-bottom: 5px
    }
    .el-menu>el-menu-item{
      font-size: 54px
    }

  </style>
</head>
<body >
<div id="app">
  <el-container>
    <el-header height="150px" style="width: 1200px; margin: 0 auto;">
      <!--导航开始-->
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" style="font-size: 24px"><a href="index.html" >首页</a></el-menu-item>
        <el-menu-item index="2" style="font-size: 24px"><a href="homepage.html" >个人主页</a></el-menu-item>
        <el-menu-item index="3" style="font-size: 24px"><a href="shopping%20cart.html" >购物车</a></el-menu-item>
        <el-menu-item index="4" style="font-size: 24px"><a href="user%20control.html" >用户管理</a></el-menu-item>
        <!--登录注册靠右边-->
        <el-menu-item index="6" style="float: right"><a href="reg.html" >注册</a></el-menu-item>
        <el-menu-item index="5" style="float: right"><a href="login.html">登录</a></el-menu-item>

      </el-menu>
      <!--导航结束-->
      <div class="line"></div><!--不明白用处的-->

    </el-header>
    <!--登录-->
    <el-main >
      <!--卡片-->
      <el-card class="box-card" style="width: 300px; height: 400px;margin: 0 auto">
        <div slot="header" class="clearfix" >
          <p style="text-align: center;font-size: 25px;margin-top: 5px;margin-bottom: 5px" >欢迎登录</p>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>
        <div class="demo-input-suffix">
          <el-input
                  placeholder="请输入账号"
                  suffix-icon="el-icon-user-solid"
                  v-model="user.username"  class="input_login">
          </el-input>
          <el-input
                  placeholder="请输入密码"
                  suffix-icon="el-icon-lock"
                  v-model="user.password" class="input_login" show-password>
          </el-input>
          <a href="" style="font-size: 10px;text-decoration: none;margin-left: 5px;color: #409EFF">忘记密码?</a>
        </div>
        
        <el-row style="text-align: center">
          <template><el-button :plain="true" type="primary" style="margin-top: 20px;margin-bottom: 0px"  @click="login">登录</el-button></template>

          <p><a href="login.html" style="font-size: 8px;text-decoration: none;margin:0 auto;color: #797979">没有账号?去注册</a></p>

        </el-row>


      </el-card>

    </el-main>
  </el-container>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data() {
      return {
        user: {username: "", password: ""},
        radio: '1',
        dialogVisible: false,
        activeIndex: '5',
      }
    },
    methods:{

   /*   op2(){
        v.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },*/
      login(){
        axios.post("/login",v.user).then(function (res) {

          if (res.data==1){//判断是否登录成功
            alert("登录成功!");
            location.href = "/.";


          }
          else if(res.data==2){
            alert("密码错误!");
            return location.href = "/login.html";
          } else{
            alert("用戶名不存在");
            return location.href = "/login.html";
          }
          //location.href = "/";//登录成功返回首页
        })




      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  })
</script>
</html>